<template>
  <div>
    <el-dialog 
      width="1100px"
      :title="$t('选择商户')"
      :visible.sync="isShow"
      :close-on-click-modal="false"
    >
      <div class="head_search u-fw">
        <div class="ipt_box">
          <p class="label font14 text_black">{{$t('商户名称')}}：</p>
          <el-input
            v-model="merchant_name"
            :placeholder="$t('请输入商户名称')"
          ></el-input>
        </div>
        <div class="ipt_box">
          <p class="label font14 text_black">{{$t('所在区域')}}：</p>
          <el-input v-model="address" :placeholder="$t('请输入地址')"></el-input>
        </div>
        <div class="select_box">
          <p class="label font14 text_black">{{$t('商户状态')}}：</p>
          <el-select
            v-model="agentStatusVal"
            :placeholder="$t('请选择')"
            @change="changeAgentStatus"
          >
            <el-option
              v-for="item in agentStatusArr"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
        <button class="sub_btn font14 text_white bg_blue" @click="getData('search')">
          {{$t('搜索')}}
        </button>
      </div>

      <div class="table_box">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="name" :label="$t('商户名称')"></el-table-column>
          <el-table-column prop="address" :label="$t('地址')"></el-table-column>
          <el-table-column prop="agency" :label="$t('所属代理')"></el-table-column>
          <el-table-column prop="employee" :label="$t('所属业务员')"></el-table-column>
          <el-table-column
            prop="brokerage"
            :label="$t('佣金比例')"
            width="100"
          >
            <template slot-scope="{ row }">
              <span>{{row.brokerage}}%</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="status"
            :label="$t('商户状态')"
            width="100"
          ></el-table-column>
          <el-table-column :label="$t('操作')" width="100">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="primary"
                @click="handleChange(scope.row)"
                >{{$t('选择')}}</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination_box ">
          <el-pagination
            background
            
            @current-change="handleCurrentChange"
            :current-page="page"
            :page-size="page_size"
            layout="total, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import util from '@/assets/js/util.js'
export default {
  name: "merchantList",
  data() {
    let that = this
    return {
      page: 1,
      page_size: 20,
      total: 0,
      isShow: false,
      merchant_name: "",
      address: "",
      agentStatusArr: [
        {
          value: 0,
          label: that.$t('选择状态')
        },
        {
          value: 1,
          label: that.$t('正常')
        },
        {
          value: 2,
          label: that.$t('禁用')
        }
      ],
      agentStatusVal: 0,
      tableData: [],
    };
  },
  props: {
    type: {
      type: [Number, String],
      default: 1
    },
    agency_id: {
      type: [Number, String],
      default: 0
    },
    employee_id: {
      type: [Number, String],
      default: 0
    },
    is_agency: {
      type: Boolean,
      default: false
    },
    memusid: {
      type: [Number, String],
      default: 0
    },
    uid: {
      type: [Number, String],
      default: 0
    }
  },
  methods: {
    show() {
      console.log("打印一下agency_id");
      console.log(this.agency_id);
      console.log("打印一下is_agency");
      console.log(this.is_agency);
      this.merchant_name = ''
      this.address = ''
      this.agentStatusVal = 0
      this.page = 1
      this.page_size = 20
      this.isShow = true;
      if(this.memusid == 6){//商户登录 查询点位
        setTimeout(()=>{
          this.merchantAll();
        },150);
      }else{
        setTimeout(() => {
          this.getData();
        }, 150);
      }
      
    },
    getData(type) {
      if( this.is_agency ) {
        this.getDataTwo(type)
      }else {
        this.getDataOne(type)
      }
    },

    merchantAll(type){
      if(type == 'search') { this.page = 1 }
      util.$http('/seller/merchantAll?page=' + this.page, {
        page_size: this.page_size,
        uid: this.uid
      })
      .then(res=>{
        if(res.code == 1) {
          this.total = res.data.total
          this.tableData = res.data.list
        }
      })
    },

    getDataOne(type) {
      if(type == 'search') { this.page = 1 }
      util.$http('/seller/listDialog?page=' + this.page, {
        page_size: this.page_size,
        name: this.merchant_name,
        area: this.address,
        status: this.agentStatusVal,
        agency_id: this.agency_id,
        employee_id: this.employee_id
      })
      .then(res=>{
        if(res.code == 1) {
          this.total = res.data.total
          this.tableData = res.data.list
        }
      })
    },
    getDataTwo(type) {
      if(type == 'search') { this.page = 1 }
      util.$http('/agency/agencySeller?page=' + this.page, {
        page_size: this.page_size,
        name: this.merchant_name,
        area: this.address,
        status: this.agentStatusVal,
        agency_id: this.agency_id
      })
      .then(res=>{
        if(res.code == 1) {
          this.total = res.data.total
          this.tableData = res.data.list
        }
      })
    },
    handleCurrentChange(val) {
      this.page = Number(val)
      this.getData()
    },
    changeAgentStatus(val) {
      this.agentStatusVal = val;
    },
    handleChange(row) {
      this.isShow = false;
      this.$emit('hide', row, this.type)
    }
  }
};
</script>

<style scoped>
.head {
  padding: 20px 20px 30px;
}
.head .icon_box {
  display: inline-block;
  width: 30px;
  height: 30px;
  cursor: pointer;
}
.head_search {
  display: flex;
  align-items: center;
  padding: 0 20px;
  margin-bottom: 20px;
}
.head_search .ipt_box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 290px;
  margin-right: 20px;
}
.head_search .ipt_box .el-input {
  width: 200px;
}
.head_search .select_box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 290px;
  margin-right: 20px;
}
.head_search .select_box .el-select {
  width: 200px;
}
.head_search .sub_btn {
  width: 70px;
  height: 40px;
  border: 0;
  outline: 0;
  cursor: pointer;
  border-radius: 4px;
}
.table_box {
  padding: 0 20px;
}
.pagination_box {
  padding: 30px 0;
}
.pagination_box .el-pagination {
  display: flex;
  justify-content: flex-end;
}
</style>
